<template>
<div>
<!--  脚本列表-->
  <h3 class="title">脚本采集设置</h3>
  <el-select v-model="scriptValue1" clearable placeholder="请选择脚本状态">
    <el-option
        v-for="item in scriptStateOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" class="el-icon-search" size="small" @click="searchScripts" style="margin-left: 10px">查询</el-button>
  <el-button type="primary" class="el-icon-circle-plus-outline" size="small" @click="addScripts">新增</el-button>
  <el-button type="primary" class="el-icon-s-claim" size="small" @click="openScripts">脚本开启</el-button>
  <el-button type="primary" class="el-icon-delete" size="small" @click="closeScripts">脚本关闭</el-button>
  <el-button type="primary" class="el-icon-refresh" size="small" @click="refresh" style="float: right">刷新</el-button>
  <el-table
      class="InfoData"
      :data="scriptsData"
      :header-cell-style="this.$handleheader"
      :row-style="this.$rowstyle"
      :cell-style="stateClass"
      border
      @selection-change="test"
  >
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="id"
        label="编号"
        align="center"
        sortable
        width="80">
    </el-table-column>
    <el-table-column
        prop="function"
        label="脚本名称"
        header-align="center"
    >
    </el-table-column>
    <el-table-column
        prop="script_name"
        label="脚本文件名"
        width="200"
        header-align="center"
    />

    <el-table-column
        prop="location"
        label="脚本路径"
        header-align="center"
    >
    </el-table-column>

    <el-table-column
        prop="type"
        label="脚本类型"
        header-align="center"
        width="95"
    >
    </el-table-column>
    <el-table-column
        prop="state"
        label="脚本状态"
        header-align="center"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="time"
        label="最近一次操作时间"
        header-align="center"
    >
    </el-table-column>
    <el-table-column
        label="操作"
        width="150"
        align='center'
        header-align="center"
    >
      <template slot-scope="scope">
        <el-button type="text" @click="editScripts(scope.row)">修改</el-button>
        <el-button type="text" @click="delScripts(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <el-pagination-->
<!--      style="margin-left: 30px;  margin-top: 10px; text-align: right"-->
<!--      background-->
<!--      layout="total, prev, pager, next"-->
<!--      :current-page="currentPage"-->
<!--      :page-size="pageSize"-->
<!--      :total="total"-->
<!--      @current-change="handleCurrentChange">-->
<!--  </el-pagination>-->
  <page :current-page="currentPage" :page-size="pageSize" :total="total" @handleChange="handleCurrentChange"></page>
  <div style="width: 100%; margin: 10px auto;height: 70%;font-weight: 200;font-size: 10px;color: red"><p style="font-size: 12px;line-height: 5px">脚本状态说明:分为【正在运行】、【未运行】、【已运行】、【异常】四类。</p></div>

  <el-dialog
      :title="scriptsMode"
      :visible.sync="scriptsDialog"
      width="30%"
      :show-close=false>
    <el-form ref="scriptsForm" :rules="rules" :model="scriptsForm" label-width="100px">
      <el-form-item label="脚本名称" prop="function">
        <el-input v-model="scriptsForm.function"></el-input>
      </el-form-item>
      <el-form-item label="脚本路径" prop="location">
        <el-input v-model="scriptsForm.location"></el-input>
      </el-form-item>
      <el-form-item label="脚本文件名" prop="script_name">
        <el-input v-model="scriptsForm.script_name"></el-input>
      </el-form-item>
      <el-form-item label="脚本类型" prop="type">
        <el-input v-model="scriptsForm.type"></el-input>
        <span>输入1表示自动运行，输入0表示手动运行</span>
<!--        <el-select v-model="scriptsForm.type" clearable placeholder="请选择周期" style="margin-left: 10px" @change="look">-->
<!--          <el-option-->
<!--              v-for="item in scriptTypeOptions"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="scriptsDialog = false">取 消</el-button>
    <el-button type="primary" @click="addOrEditScripts('scriptsForm')">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import Page from "@/components/page";
import {mixin} from "@/components/mixin";
import {addScript, closeScript, delScript, editScript, openScript, scriptList, selectScript} from "@/api/system";
import moment from "moment";
export default {
  name: "systemSetting",
  components: {Page},
  data() {
    return {
      currentPage:1,
      pageSize:10,
      total:'',
      scriptValue1:'',
      scriptValue2:'',
      scriptStateOptions:[{
        value:'0',
        label:'未运行'
      },
        {
          value:'1',
          label:'正在运行'
        },
        {
          value:'2',
          label:'已运行'
        },
        {
          value:'3',
          label:'异常'
        }],
      scriptTypeOptions:[
        {
          value:'1',
          label:'自动运行'
        },
        {
          value:'0',
          label:'手动运行'
        }
      ],
      value1: true,
      value2: true,
      value3: 3,
      multipleSelection:[],
      selectData:[],
      scriptsData:null,
      scriptsMode:'',
      scriptsDialog:false,
      scriptsForm:{
        script_name:'',
        location:'',
        function:'',
        type:'',
        script_id:''
        // state:'0',
      },
      rules:{
        script_name: [
          {required: true, message: '请输入脚本名称', trigger: 'blur'},
        ],
        location: [
          {required: true, message: '请输入脚本路径', trigger: 'blur'},
        ],
        function: [
          {required: true, message: '请输入脚本功能', trigger: 'blur'},
        ],
        type: [
          {required: true, message: '请输入脚本类型', trigger: 'blur'},
          {pattern:/^[0-1]$/,message: '类型输入不正确'}
        ]
      }
    }
  },
  created() {
    this.initData()
  },
  mixins:[mixin],
  methods:{
    // TODO 开启和关闭脚本时与后端交互
    pyChange() {
      console.log(this.value2)
    },
    look() {
      console.log(this.scriptsForm.type);
    },
    test(val) {
      this.selectData=[]

      this.multipleSelection = val;
      for (let i=0;i<this.multipleSelection.length;i++){
        this.selectData.push(this.multipleSelection[i].script_id)
      }
      console.log(this.multipleSelection);
      console.log(this.selectData);
      console.log(this.selectData.join(','))
    },
    openScripts(){
      openScript(this.selectData.join(',')).then(res=>{
      // axios.get(this.$ip2 +'/system/script/start?id_list=' + this.selectData.join(',')).then(res=>{
        //全部启动成功的时候
        if (res.data.fail.length===0) {
          this.$message({
            message: '脚本全部启动成功啦',
            type: 'success'
          });
          this.initData()
        }
        else {
          this.$message.error('脚本出问题拉');
          this.initData()
        }

      })
    },
    closeScripts(){
      closeScript(this.selectData.join(',')).then(res=>{
      // axios.get(this.$ip2 +'/system/script/end?id_list=' + this.selectData.join(',')).then(res=>{
        //全部启动成功的时候
        if (res.data.fail.length===0) {
          this.$message({
            message: '脚本全部关闭成功啦',
            type: 'success'
          });
          this.initData()
        }
        else {
          this.$message.error('脚本出问题拉');
          this.initData()
        }
      })
    },
    refresh() {
      this.initData()
      this.scriptValue1 = ''
    },
    searchScripts(){
      selectScript(this.scriptValue1).then(res=>{
      // axios.get(this.$ip2 + '/system/script/state?state=' + this.scriptValue1).then(res=>{
        console.log(res)
        this.scriptsData = res.data
        for (let i =0;i<res.data.length;i++){
          this.scriptsData[i].id = i + 1
          if (this.scriptsData[i].type===0){
            this.scriptsData[i].type = '手动运行'
          }
          else {
            this.scriptsData[i].type = '自动运行'
          }
          if (this.scriptsData[i].state===0){
            this.scriptsData[i].state='未运行'
          }
          else if(this.scriptsData[i].state===1){
            this.scriptsData[i].state='正在运行'
          }
          else if(this.scriptsData[i].state===2){
            this.scriptsData[i].state='已运行'
          }
          else{
            this.scriptsData[i].state='异常'
          }
        }
      })
    },
    addScripts() {
      this.scriptsMode='脚本新增'
      this.scriptsForm.function=''
      this.scriptsForm.script_name=''
      this.scriptsForm.type=''
      this.scriptsForm.location=''
      // this.scriptsForm.state='0'
      this.scriptsDialog = true
    },
    editScripts(row) {
      this.scriptsMode='脚本信息修改'
      // this.scriptsForm=JSON.parse(JSON.stringify(row))
      this.scriptsForm.location = JSON.parse(JSON.stringify(row.location))
      this.scriptsForm.script_name = JSON.parse(JSON.stringify(row.script_name))
      this.scriptsForm.function = JSON.parse(JSON.stringify(row.function))
      this.scriptsForm.script_id = JSON.parse(JSON.stringify(row.script_id))
      this.scriptsForm.type = JSON.parse(JSON.stringify(row.type))==='自动运行'? 1:0
      this.scriptsDialog=true
    },

    delScripts(row) {
      this.$confirm('确定要删除吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        delScript(row.script_id).then(res=>{
        // axios.get(this.$ip2 + '/system/script/del?script_id='+row.script_id).then(res=>{
          console.log(res);
          if (res.data==='脚本删除成功'){
            this.$message({
              message: '脚本删除成功',
              type: 'success'
            });
            this.initData()
          }
        })
      }).catch(()=>{
        this.$message.info("已取消删除")
      })
    },
    addOrEditScripts(scriptsForm){
      console.log(this.scriptsForm);
      this.$refs[scriptsForm].validate((valid) => {
        if (valid) {
          if (this.scriptsMode === '脚本新增'){
            addScript(this.scriptsForm).then(res=>{
            // axios.post(this.$ip2 + '/system/script/add',this.scriptsForm).then(res=>{
              if (res.data==='脚本新增成功'){
                this.$message({
                  message: '脚本新增成功',
                  type: 'success'
                });
                this.scriptsDialog = false
                //重新获取数据实现局部刷新
                this.initData()
              }
            })
          }
          else {
            console.log( '???.',this.scriptsForm)
            // this.scriptsForm.type ==='自动运行'? this.scriptsForm.type=1: this.scriptsForm.type=0
            editScript(this.scriptsForm).then(res=>{
            // axios.post(this.$ip2 + '/system/script/edit',this.scriptsForm).then(res => {
              if (res.data==='脚本修改成功'){
                this.$message({
                  message: '脚本修改成功',
                  type: 'success'
                });
                this.scriptsDialog = false
                //重新获取数据实现局部刷新
                this.initData()
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    initData() {
      scriptList().then(res=>{
      // axios.get(this.$ip2 + '/system/script/list').then(res=>{
        this.scriptsData = res.data
        this.total = res.data.length
        for (let i =0;i<res.data.length;i++){
          this.scriptsData[i].id = i + 1
          res.data[i].time = moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')
          if (this.scriptsData[i].type===0){
            this.scriptsData[i].type = '手动运行'
          }
          else {
            this.scriptsData[i].type = '自动运行'
          }
          if (this.scriptsData[i].state===0){
            this.scriptsData[i].state='未运行'
          }
          else if(this.scriptsData[i].state===1){
            this.scriptsData[i].state='正在运行'
          }
          else if(this.scriptsData[i].state===2){
            this.scriptsData[i].state='已运行'
          }
          else{
            this.scriptsData[i].state='异常'
          }
        }
      })
    },
    //脚本状态单元格样式修改
    stateClass(row){
        if (row.columnIndex ===6 && row.row.state==='未运行'){
          return  {
            padding:'0px',
            backgroundColor:'hotpink',
            color:'#fff',
            height:'33px',
            lineHeight:'10px',
          }

        }
        else if (row.columnIndex ===6 && row.row.state==='正在运行'){
          return  {
            padding:'0px',
            backgroundColor:'green',
            color:'#fff',
            height:'33px',
            lineHeight:'10px',
          }
        }
        else if (row.columnIndex ===6 && row.row.state==='已运行'){
          return  {
            padding:'0px',
            backgroundColor:'yellowgreen',
            color:'#fff',
            height:'33px',
            lineHeight:'10px',
          }
        }
        else if (row.columnIndex ===6 && row.row.state==='异常'){
          return  {
            padding:'0px',
            backgroundColor:'red',
            color:'#fff',
            height:'33px',
            lineHeight:'10px',
          }
        }
        else {
          return  {
            padding:'0px',
            height:'33px',
            lineHeight:'10px',
          }
        }
      }

  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
